<template>
  <z-publicFrame>
    <template #header>
      <el-page-header @back="goBack" content="添加">
      </el-page-header>
    </template>
    <template #container>
      <div class="formStyle">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="name" label="接口描述">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item prop="url" label="url">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="是否锁定" prop="available">
            <el-radio-group v-model="form.available">
              <el-radio :label="1">公开</el-radio>
              <el-radio :label="0">锁定</el-radio>
            </el-radio-group>
          </el-form-item>

<!--          <el-form-item label="父接口" prop="parentCode">-->
<!--            <el-select v-model="form.parentCode" placeholder="请选择父节点">-->
<!--              <el-option :label="'一级接口'" :value="null"></el-option>-->
<!--              <el-option :key="item.id" v-for="item in menus" :label="item.label" :value="item.id"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="详细配置">
            <el-input type="textarea" v-model="form.perConfig"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd">立即增加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'

export default {
  name: 'add',
  components: {
    'z-publicFrame': PublicFrame
  },
  data() {
    return {
      api: {
        add: this.$api.api.add
      },
      rules: {
        name: [
          { required: true, message: '请输入接口名称', trigger: 'blur' }
        ]
      },
      form: {
        name: '',
        available: 1,
        perConfig: '{}',
        url: null
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    goBack() {
      this.$router.go(-1)
    },
    async handleAdd() {
      const data = await this.$http.post(this.api.add, this.$qs.stringify(this.form))
      if (!data) {
        return
      }

      if (data.data.status === 200) {
        this.$success(data.data.message)
        this.goBack()
        return
      }
      this.$error(data.data.message)
    }
  }
}
</script>

<style scoped>
  .el-page-header {
    margin: 15px 0;
    overflow: hidden;
  }
  div.formStyle {
    margin-top: 30px;

  }

</style>
